import React, { Component } from 'react'
import './changer.css'

export default class color extends Component {
    constructor(props){
        super(props)
        this.state={
            red:255,green:255,blue:255
        }
        
    }
    _change=event=>{
            let name=event.target.getAttribute('name')
            this.setState({[name]:event.target.value})
    }
    render() {
        return (
            <div id='changer'>
                <input min='0' max='255' name='red' 
                type="range" value={this.state.red} 
                onChange={this._change}/>
                <input min='0' max='255' name='green' 
                type="range" value={this.state.green} 
                onChange={this._change}/>
                <input min='0' max='255' name='blue' 
                type="range" value={this.state.blue} 
                onChange={this._change}/>
            
                <div id="dividePan">
                    <div style={{backgroundColor:'rgb('+this.state.red+',0,0)'}}>{this.state.red}</div>
                    <div style={{backgroundColor:`rgb(0,${this.state.green},0)`}}>{this.state.green}</div>
                    <div style={{backgroundColor:`rgb(0,0,${this.state.blue})`}}>{this.state.blue}</div>
                </div>
                <div id="colorPan" style={{backgroundColor:`rgb(${this.state.red},${this.state.green},${this.state.blue})`}}>
                    <span style={{Color:`rgb(${255-this.state.red},${255-this.state.green},${255-this.state.blue})`}}>rgb({this.state.red},{this.state.green},{this.state.blue})</span>
                </div>
            </div>
        )
    }
}
